<!--
 * @Author: your name
 * @Date: 2021-05-21 20:38:35
 * @LastEditTime: 2021-05-22 09:46:00
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \cesium-vue\src\components\Models.vue
-->
<template>
    <ul class="menuList">
        <li class="menuItem" @click="select($event)">
            <p>模型浏览</p>
            <select name="3dtile-models" v-model="modelSelected" @change="getModelSelected">
                <option value="-1">---请选择---</option>
                <option :value="model.id" v-for="model in modelList" :key="model.id">{{model.name}}</option>
            </select>
        </li>
        <li class="menuItem" @click="select($event)">
            <p>几何体</p>
            <select name="geometry-models" v-model="geometrySelected" @change="loadGeometry">
                <option value="-1">---请选择---</option>
                <option value="0">开口柱体</option>
                <option value="1">圆锥体</option>
            </select>
        </li>
        <li class="menuItem" @click="select($event)">
            <p @click="loadOsmBuildings">osm建筑</p>
            <select name="osm-buildings" v-model="osmSelected" @change="colorBuildings">
                <option value="-1">---请选择---</option>
                <option value='0'>通过材质上色</option>
                <option value="1">通过距离上色</option>
            </select>
        </li>
    </ul>
</template>
<script type="module">
    export default{
    data(){
        return{
                modelSelected:-1,
                osmSelected:-1,
                geometrySelected:-1,
                modelHeight:0,
                geometryList:[
                  {
                    name: "Green extruded Circle",
                    polygon: {
                        hierarchy: Cesium.Cartesian3.fromDegreesArray([
                            -108.0,
                            42.0,
                            -100.0,
                            42.0,
                            -104.0,
                            40.0,
                        ]),
                    extrudedHeight: 500000.0,
                    material: Cesium.Color.GREEN,
                    closeTop: false,
                    closeBottom: false,
                    } 
                  },
                  {
                    name: "Red cone",
                    position: Cesium.Cartesian3.fromDegrees(-105.0, 40.0, 200000.0),
                    cylinder: {
                        length: 400000.0,
                        topRadius: 0.0,
                        bottomRadius: 200000.0,
                        material: Cesium.Color.RED,
                        },
                    } 
                ],
                modelList:[
                    {
                        id: 0,
                        name:"油气田",
                        url:"http://data.marsgis.cn/3dtiles/max-ytlhz/tileset.json"
                    },
                    {
                        id: 1,
                        name: "大雁塔",
                        url:'http://earthsdk.com/v/last/Apps/assets/dayanta/tileset.json',
                        height:-420
                    },
                    {
                        id:2,
                        name:"Aerometrex Denver",
                        url: Cesium.IonResource.fromAssetId(354307)
                    },
                    {
                        id:3,
                        name:"博士后创新创业园周边建筑",
                        url: "http://121.4.131.58:8000/models/doctor_around/tileset.json"
                    },

                    {
                        id:4,
                        name:"Montreal",
                        url:Cesium.IonResource.fromAssetId(28945),
                        classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
                        style:new Cesium.Cesium3DTileStyle({
                            color: {
                                conditions: [
                                    // ground
                                    ["${Classification} === 2", "color('black', 1)"],
                                    // 草地
                                    ["${Classification} === 3", "color('green', 1)"],
                                    // 中层植被
                                    ["${Classification} === 4", "color('yellowgreen', 1)"],
                                    // 树木
                                    ["${Classification} === 5", "color('yellow', 1)"],
                                    // 建筑
                                    ["${Classification} === 6", "color('aqua', 1)"],
                                    ["true", "color('gray', 1)"],
                                ],
                            },
                        })
                    },
                    {
                        id:5,
                        name:'工厂',
                        url:'http://lab.earthsdk.com/model/27af3f70003311eaae02359b3e5d0653/tileset.json'
                                                // 外部简模：http://lab.earthsdk.com/model/27af3f70003311eaae02359b3e5d0653/tileset.json
        // 内部精模：http://lab.earthsdk.com/model/212bc470003311eaae02359b3e5d0653/tileset.json
        // 内部简模：http://lab.earthsdk.com/model/1b91bf10003311eaae02359b3e5d0653/tileset.json
                    },
                                        {
                        id:6,
                        name:"西电路",
                        url:'http://localhost:3000/models/xdroad/tileset.json',
                        lightColor : new Cesium.Cartesian3(100.0,100.0, 100.0),
                        height:-38.4,
                        maximumScreenSpaceError: 1,
                    },
                      {
                        id:7,
                        name:"阳光大厦",
                        url:'http://localhost:3000/models/ygds/tileset.json',
                        height:-38.4,
                        maximumScreenSpaceError: 1,
                    },
                ],
        }
    },
    methods:{
            getModelSelected(){
                global.modelUtil.remove();
                global.modelUtil.loadTiles(this.modelList[this.modelSelected]);
            },
            select(event){
                let lastDom =document.getElementsByClassName("menuItem-clicked")[0];
                if(lastDom){
                    lastDom.classList.remove("menuItem-clicked")
                }

                let dom =event.currentTarget;

                // dom.style="background-color:rgba(0,0,0,1)";
                dom.classList.add("menuItem-clicked")
            },
            loadOsmBuildings(){
                global.osmBuildingUtil.loadOSMBuildings();
            },
            colorBuildings(){
                if(this.osmSelected ==0){
                    global.osmBuildingUtil.colorByMaterial();
                }else if(this.osmSelected ==1){
                   global.osmBuildingUtil.colorByDistanceToCoordinate();
                }
            },
            loadGeometry(){
                global.modelUtil.remove();
                global.modelUtil.loadGeometry(this.geometryList[this.geometrySelected])
            }
    }
}
</script>
<style scoped>

</style>